<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%--@elvariable id="model" type="java.util.Map"--%>

<html><head>
    <%@ include file="head.jsp" %>
    <%@ include file="jquery.jsp" %>
    <c:if test="${not model.updateNowPlaying}">
        <meta http-equiv="refresh" content="180;URL=nowPlaying.view?">
    </c:if>
    <script type="text/javascript" src="<c:url value="/dwr/engine.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/dwr/interface/playlistService.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/fancyzoom/FancyZoom.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/fancyzoom/FancyZoomHTML.js"/>"></script>

    <style type="text/css">
        .coverart { float: left; padding-left:10px; padding-right:10px; padding-bottom:20px }
    </style>

</head><body class="mainframe bgcolor1" onload="init();">

<c:url value="download.view" var="downloadUrl">
    <c:param name="directory" value="${model.directory.path}"/>
</c:url>

<script type="text/javascript" language="javascript">
    function init() {
        setupZoom('<c:url value="/"/>');

        $("#dialog-select-playlist").dialog({resizable: true, height: 220, position: 'top', modal: true, autoOpen: false,
            buttons: {
                "<fmt:message key="common.cancel"/>": function() {
                    $(this).dialog("close");
                }
            }});
    }

    <!-- actionSelected() is invoked when the users selects from the "More actions..." combo box. -->
    function actionSelected(id) {

        if (id == "top") {
            return;
        } else if (id == "selectAll") {
            selectAll(true);
        } else if (id == "selectNone") {
            selectAll(false);
        } else if (id == "download") {
            location.href = "${downloadUrl}&" + getSelectedIndexes();
        } else if (id == "appendPlaylist") {
            onAppendPlaylist();
        }
        $("#moreActions").prop("selectedIndex", 0);
    }

    function getSelectedIndexes() {
        var result = "";
        for (var i = 0; i < ${fn:length(model.children)}; i++) {
            var checkbox = $("#songIndex" + i);
            if (checkbox != null  && checkbox.is(":checked")) {
                result += "i=" + i + "&";
            }
        }
        return result;
    }

    function selectAll(b) {
        for (var i = 0; i < ${fn:length(model.children)}; i++) {
            var checkbox = $("#songIndex" + i);
            if (checkbox != null) {
                if (b) {
                    checkbox.attr("checked", "checked");
                } else {
                    checkbox.removeAttr("checked");
                }
            }
        }
    }

    function onAppendPlaylist() {
        playlistService.getWritablePlaylists(playlistCallback);
    }
    
    function playlistCallback(playlists) {
        $("#dialog-select-playlist-list").empty();
        for (var i = 0; i < playlists.length; i++) {
            var playlist = playlists[i];
            $("<p class='dense'><b><a href='#' onclick='appendPlaylist(" + playlist.id + ")'>" + playlist.name + "</a></b></p>").appendTo("#dialog-select-playlist-list");
        }
        $("#dialog-select-playlist").dialog("open");
    }
    
    function appendPlaylist(playlistId) {
        $("#dialog-select-playlist").dialog("close");

        var mediaElementIds = new Array();
        for (var i = 0; i < ${fn:length(model.children)}; i++) {
            var checkbox = $("#songIndex" + i);
            if (checkbox && checkbox.is(":checked")) {
                mediaElementIds.push($("#songId" + i).html());
            }
        }
        playlistService.appendToPlaylist(playlistId, mediaElementIds, function (){
            top.left.updatePlaylists();
            $().toastmessage("showSuccessToast", "<fmt:message key="playlist.toast.appendtoplaylist"/>");
        });
    }

</script>

<c:if test="${model.updateNowPlaying}">

    <script type="text/javascript" language="javascript">
        // Variable used by javascript in playlist.jsp
        var updateNowPlaying = true;
    </script>
</c:if>

<h1>
    <span style="vertical-align: middle">
        <c:forEach items="${model.ancestors}" var="ancestor">
            <c:url value="main.view" var="ancestorUrl">
                <c:param name="id" value="${ancestor.id}"/>
            </c:url>
            <a href="${ancestorUrl}">${ancestor.name}</a> &raquo;
        </c:forEach>
        ${model.directory.name}
    </span>
</h1>

<h2>
    <c:if test="${model.navigateUpAllowed}">
            <c:url value="main.view" var="upUrl">
                <c:param name="id" value="${model.parent.id}"/>
            </c:url>
            <span class="header"><a href="${upUrl}"><fmt:message key="main.up"/></a></span>
            <c:set var="needSep" value="true"/>
    </c:if>

    <c:if test="${model.user.streamRole}">
        <c:if test="${needSep}">|</c:if>
        <span class="header"><a href="#" onclick="top.playQueue.onPlay(${model.directory.id});"><fmt:message key="main.playall"/></a></span> |
        <span class="header"><a href="#" onclick="top.playQueue.onPlayRandom(${model.directory.id}, 10);"><fmt:message key="main.playrandom"/></a></span> |
        <span class="header"><a href="#" onclick="top.playQueue.onAdd(${model.directory.id});"><fmt:message key="main.addall"/></a></span>
        <c:set var="needSep" value="true"/>
    </c:if>

    <c:if test="${model.directory.directory}">

        <c:if test="${model.user.downloadRole}">
            <c:url value="download.view" var="downloadUrl">
                <c:param name="id" value="${model.directory.id}"/>
            </c:url>
            <c:if test="${needSep}">|</c:if>
            <span class="header"><a href="${downloadUrl}"><fmt:message key="common.download"/></a></span>
            <c:set var="needSep" value="true"/>
        </c:if>

    </c:if>
</h2>

<c:if test="${model.directory.directory}">

            <div class="detail" style="padding-top:0.2em">
                <fmt:message key="main.playcount"><fmt:param value="${model.directory.playCount}"/></fmt:message>
                <c:if test="${not empty model.directory.lastPlayed}">
                    <fmt:message key="main.lastplayed">
                        <fmt:param><fmt:formatDate type="date" dateStyle="long" value="${model.directory.lastPlayed}"/></fmt:param>
                    </fmt:message>
                </c:if>
            </div>

        </c:if>

        <table cellpadding="10" style="width:100%">
            <tr style="vertical-align:top;">
                <td style="vertical-align:top;">
                    <table style="border-collapse:collapse;white-space:nowrap">
                        <c:set var="cutoff" value="35"/>
                        <c:forEach items="${model.children}" var="child" varStatus="loopStatus">
                            <%--@elvariable id="child" type="com.google.code.sms.domain.MediaElement"--%>
                            <c:choose>
                                <c:when test="${loopStatus.count % 2 == 1}">
                                    <c:set var="cssClass" value="class='bgcolor2'"/>
                                </c:when>
                                <c:otherwise>
                                    <c:set var="cssClass" value=""/>
                                </c:otherwise>
                            </c:choose>

                            <tr style="margin:0;padding:0;border:0">
                                <c:import url="playAddDownload.jsp">
                                    <c:param name="id" value="${child.id}"/>
                                    <c:param name="video" value="${child.video}"/>
                                    <c:param name="playEnabled" value="${model.user.streamRole and not child.rootDirectory and not child.metaData.videoDirectory}"/>
                                    <c:param name="addEnabled" value="${model.user.streamRole and not child.rootDirectory and not child.metaData.videoDirectory and not child.video}"/>
                                    <c:param name="downloadEnabled" value="${model.user.downloadRole and not child.rootDirectory and not child.metaData.videoDirectory}"/>
                                    <c:param name="asTable" value="true"/>
                                </c:import>

                                <c:choose>
                                    <c:when test="${child.directory}">
                                        <c:url value="main.view" var="childUrl">
                                            <c:param name="id" value="${child.id}"/>
                                        </c:url>
                                        <td style="padding-left:0.25em" colspan="3">
                                            <a href="${childUrl}" title="${child.name}"><span style="white-space:nowrap;"><str:truncateNicely upper="${cutoff}">${child.name}</str:truncateNicely></span></a>
                                            </td>
                                            <td style="padding-left:1.25em"><c:if test="${not empty child.metaData.year}"><span class="detail">${child.metaData.year}</span></c:if></td>
                                        </c:when>

                                    <c:otherwise>
                                        <td ${cssClass} style="padding-left:0.25em"><input type="checkbox" class="checkbox" id="songIndex${loopStatus.count - 1}">
                                            <span id="songId${loopStatus.count - 1}" style="display: none">${child.id}</span></td>

                                        <td ${cssClass} style="padding-right:0.5em;text-align:right">
                                            <span class="detail">${child.metaData.trackNumber}</span>
                                        </td>

                                        <td ${cssClass} style="padding-right:1.25em;white-space:nowrap">
                                            <span title="${child.metaData.title}"><str:truncateNicely upper="${cutoff}">${fn:escapeXml(child.metaData.title)}</str:truncateNicely></span>
                                        </td>

                                        <c:if test="${child.metaData.artist != child.metaData.albumArtist}">
                                            <td ${cssClass} style="padding-right:1.25em;white-space:nowrap">
                                                <span class="detail">${child.metaData.artist}</span>
                                            </td>
                                        </c:if>

                                        <c:if test="${child.video}">
                                            <td ${cssClass} style="padding-right:1.25em">
                                                <span class="detail">${child.metaData.year}</span>
                                            </td>
                                        </c:if>

                                        <td ${cssClass} style="padding-right:1.25em;text-align:right">
                                            <span class="detail">${child.metaData.durationAsString}</span>
                                        </td>

                                    </c:otherwise>
                                </c:choose>
                            </tr>
                        </c:forEach>
                    </table>
                </td>

                <td style="vertical-align:top;width:100%" rowspan="2">
                    <div style="float:right">
                        <c:forEach items="${model.coverArts}" var="coverArt" varStatus="loopStatus">
                            <div class="coverart">
                                <c:import url="coverArt.jsp">
                                    <c:param name="coverArtId" value="${coverArt.id}"/>
                                    <c:param name="coverArtCaption" value="${coverArt.name}"/>
                                    <c:param name="coverArtSize" value="${model.coverArtSize}"/>
                                    <c:param name="showLink" value="${coverArt ne model.directory}"/>
                                    <c:param name="showZoom" value="${coverArt eq model.directory}"/>
                                    <c:param name="showCaption" value="true"/>
                                    <c:param name="appearAfter" value="${loopStatus.count * 30}"/>
                                </c:import>
                            </div>
                        </c:forEach>

                        <c:if test="${model.showGenericCoverArt}">
                            <div class="coverart">
                                <c:import url="coverArt.jsp">
                                    <c:param name="coverArtId" value="${model.directory.id}"/>
                                    <c:param name="coverArtSize" value="${model.coverArtSize}"/>
                                    <c:param name="showLink" value="false"/>
                                    <c:param name="showZoom" value="false"/>
                                    <c:param name="appearAfter" value="0"/>
                                </c:import>
                            </div>
                        </c:if>
                    </div>
                </td>
            </tr>
        </table>

        <select id="moreActions" onchange="actionSelected(this.options[selectedIndex].id);" style="margin-bottom:1.0em">
            <option id="top" selected="selected"><fmt:message key="main.more"/></option>
            <option style="color:blue;"><fmt:message key="main.more.selection"/></option>
            <option id="selectAll">&nbsp;&nbsp;&nbsp;&nbsp;<fmt:message key="playlist.more.selectall"/></option>
            <option id="selectNone">&nbsp;&nbsp;&nbsp;&nbsp;<fmt:message key="playlist.more.selectnone"/></option>
            <c:if test="${model.user.downloadRole}">
                <option id="download">&nbsp;&nbsp;&nbsp;&nbsp;<fmt:message key="common.download"/></option>
            </c:if>
            <option id="appendPlaylist">&nbsp;&nbsp;&nbsp;&nbsp;<fmt:message key="playlist.append"/></option>
        </select>

        <div style="padding-bottom: 1em">
            <c:if test="${not empty model.previousDirectory}">
                <c:url value="main.view" var="previousUrl">
                    <c:param name="id" value="${model.previousDirectory.id}"/>
                </c:url>
                <div class="back" style="float:left;padding-right:10pt"><a href="${previousUrl}" title="${model.previousAlbum.name}">
                        <str:truncateNicely upper="30">${fn:escapeXml(model.previousDirectory.name)}</str:truncateNicely>
                        </a></div>
                </c:if>
                <c:if test="${not empty model.nextDirectory}">
                    <c:url value="main.view" var="nextUrl">
                        <c:param name="id" value="${model.nextDirectory.id}"/>
                    </c:url>
                <div class="forward" style="float:left"><a href="${nextUrl}" title="${model.nextDirectory.name}">
                        <str:truncateNicely upper="30">${fn:escapeXml(model.nextDirectory.name)}</str:truncateNicely>
                        </a></div>
                </c:if>
        </div>

        <div id="dialog-select-playlist" title="<fmt:message key="main.addtoplaylist.title"/>" style="display: none;">
            <p><fmt:message key="main.addtoplaylist.text"/></p>
            <div id="dialog-select-playlist-list"></div>
        </div>

    </body>
</html>
